<template>
  <div>
        <el-table
    :data="list"
    border
    style="width: 100%">
      <el-table-column
      prop="uid"
      label="ID">
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="avatar"
      label="图片">
      <template slot-scope="prop">
          <img :src="prop.row.avatar" width="40px" alt="">
      </template>
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="手机号">
    </el-table-column>
    <el-table-column
      prop="created_at"
      label="创建时间">
      <template slot-scope="prop">
          <span>{{prop.row.created_at | getLocalTime}}</span>
      </template>
    </el-table-column>
         <el-table-column
      fixed="right"
      label="操作">
        <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small" @click="onClickNew(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
       </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="this.list.length"
        :page-size="10">
        </el-pagination>
       <div class="new" v-show="isShow">
         <div class="title"><h2>修改内容</h2></div>
          <div>姓名<input type="text" v-model="name"></div>
          <div>手机号<input type="text" v-model="mobile"></div>
          <div><button @click="onClickque">确定</button>
            <button @click="onClickqu">取消</button>
          </div>
       </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      list:[],
      isShow:false,
      name:'',
      mobile:'',
      uid:''
    }
  },
    mounted(){
    axios.get("http://localhost:8080/list.json").then((res)=>{
      this.list = res.data;
      // this.$route.commit("INIT_LIST",this.list)
    })
  },
  filters:{
    getLocalTime(nS){
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');   
    }
  },
  methods:{
    handleClick(index){
      // console.log(index);
      this.list.splice(index,1)
    },
    onClickNew(index){
      console.log(index);
      this.isShow = true;
      this.name = index.nickname;
      this.mobile = index.mobile;
      this.uid = index.uid;
    },
    onClickqu(){
      this.isShow = false;
    },
    onClickque(){
      this.list.forEach(item=>{
        if(item.uid == this.uid){
          item.nickname = this.name;
          item.mobile = this.mobile;
        }
        this.isShow = false;
      })
    },
  },
  computed:{
    showList:function(){
      var tempList = [];
      for(let i=10;i<10;i++){
          tempList.push[this.list[i]]
      }
      return tempList;
    }
  }
}
</script>

<style>
.new
{
  width: 500px;
  height: 200px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: fixed;
  top: 193px;
  left: 666px;
  background: white;
}
.new div 
{
  width: 80%;
  height: 20px;
    display: flex;
  justify-content: center;
  align-items: center;
}

</style>